<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">考勤组设置</block>
		</cu-custom>

		<view class="cu-bar">
			<view class="action">
				<text class="cuIcon-title text-orange"></text>考勤组设置
			</view>
		</view>

		<view class="cu-list menu">
			<view @click="addgroup" class="cu-item">
				<view class="content padding-tb-sm">
					<view>
						<text class="text-blue margin-right-xs">新增考勤组</text>
					</view>
					<view class="text-gray text-sm">
						考勤规则相同的人设置到同一考勤组，方便统计
					</view>
				</view>
				<view class="action">
					<image class="cu-add" src="../../../static/icon_add.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<view class="cu-list menu">
			<view @click="ItemClick" :data-index="index" v-for="(item,index) in attgroup" :key="index" class="cu-item">
				<view class="content padding-tb-sm">
					<view class="title">
						<view class="margin-right-xs">{{item.sname}}</view>
						<view class="action">
							<button @click.stop="deletAttGroup(item.id)" class="cu-delete bg-white text-gray"><text class="cuIcon-delete"></text></button>
						</view>
					</view>
					<view class="text-gray text-df line-hide-text">
						<text class="cuIcon-people padding-right-xsm"></text>{{item.personnelname}}
					</view>
					<view class="text-gray text-df line-hide-text">
						<text class="cuIcon-time padding-right-xsm"></text>{{item.schedulinginfo}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	let _self = null
	export default {
		data() {
			return {
				attgroup: [],
				shiset:{}
			}
		},
		onLoad() {
			_self = this
		},
		onShow() {
			this.getData()
		},
		methods: {
			addgroup(){
				uni.navigateTo({
					url:'attendance-group-add?shiset='+JSON.stringify(this.shiset)
				})
			},
			ItemClick(e){
				let index = e.currentTarget.dataset.index
				let data = JSON.stringify(this.attgroup[index])
				let shiset = JSON.stringify(this.shiset)
				uni.navigateTo({
					url:'attendance-group-add?attgroup='+data+'&shiset='+shiset
				})
			},
			getData() {
				uni.request({
					url: _self.$constant.BASEURL + _self.$constant.GET_ATTENDANCE_GROUP,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: getApp().globalData.username,
						token: getApp().globalData.token,
						unitno: getApp().globalData.orgcode,
					},
					success: function(res) {
						var result = res.data.data
						if (typeof(result) != 'undefined' || result != null) {
							_self.attgroup = result.shif
							_self.shiset = result.shiset
							// console.log(result)
						}
					},
					fail: () => {
						uni.showToast({
							title: "网络错误",
							icon: 'none'
						})
					},
				});
			},
			deletAttGroup(id){
				let that = this
				uni.showModal({
					title:'提示',
					content:'确认要删除该考勤组吗?',
					success(res) {
						if(res.confirm){
							that.startDelete(id)
						}
					}
				})
				
			},
			startDelete(id){
				console.log(id)
				uni.request({
					url: this.$constant.BASEURL + this.$constant.DELETE_ATTENDANCE_GROUP,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: getApp().globalData.username,
						token: getApp().globalData.token,
						unitno: getApp().globalData.orgcode,
						id:id
					},
					success: (res) => {
						console.log(res.data)
						if (res.data.code == 0) {	
							uni.showToast({
								title: res.data.message,
							})
							this.getData()
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	.cu-add {
		width: 56upx;
		height: 56upx;
	}

	.title {
		display: flex;
		justify-content: space-between;
	}

	.cu-delete {
		width: 56upx;
		height: 56upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.padding-right-xsm {
		padding-right: 8upx;
	}

	.line-hide-text {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; //作为弹性伸缩盒子模型显示。
		-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
		-webkit-line-clamp: 1; //显示的
	}

</style>
